﻿function $(id)
{
	return document.getElementById(id);
}

function Popup(content_id, onClickCallBack)
{
	this.content = $(content_id);
	
	this.constructor.prototype.createContainer = function()
	{
		if (!this.content)
			return;
		
		this.container = document.createElement("div");
		this.container.id = (this.content.id ? this.content.id : "some") + "PopupContainer";
		with (this.container.style)
		{
			width = this.content.style.width;
			height = this.content.style.height;
			visibility = "hidden";
			backgroundColor = "transparent";
			position = "absolute";
			zIndex = "10";
		}
		
		document.body.appendChild(this.container);
		
		return this.container;
	}
	
	this.constructor.prototype.makePopup = function(onClickCallBack)
	{
		this.createContainer().appendChild(this.content);
		if (onClickCallBack)
		{
			this.setOnClick(onClickCallBack);
		}
		else
		{
			var _this = this;
			_this.setOnClick(function()
				{
					_this.hide();
				});
		}
	}
	
	this.constructor.prototype.setOnClick = function(f)
	{
		this.container.onclick = f;
	}
	
	this.constructor.prototype.show = function(event)
	{
		with (this.container.style)
		{
			visibility = "visible";
			top = event.clientY + "px";
			left = event.clientX + "px";
		}
	}
	
	this.constructor.prototype.hide = function()
	{
		this.container.style.visibility = "hidden";
	}
	
	this.makePopup(onClickCallBack);
}